import { defineComponent, onMounted, reactive } from 'vue'
import { ElDialog } from 'element-plus'

import type { TableColumnProps } from '~/components/ProSaasTable/typings'
import ProSaasTable from '~/components/ProSaasTable'
import type { devPlanType } from './typings'

// 单灯调光
export default defineComponent({
  props: ['data', 'cancel'],
  setup(props) {
    const state: any = reactive({
      data: [],
      sanMethod: []
    })
    onMounted(() => {
      props.data.map((item: any) => {
        return item.list?.map((el: any) => {
          return state.data.push({
            date: item.date,
            num: el.num,
            no: el.no,
            beginTime: el.beginTime,
            endTime: el.endTime,
            dim: el.dim
          })
        })
      })
      //  计算合并列数据
      let count = 0
      for (let i = 0; i < state.data.length; i++) {
        if (i === 0) {
          state.sanMethod.push(1)
          count = 0
        } else {
          if (state.data[i].date === state.data[i - 1].date) {
            state.sanMethod[count] += 1
            state.sanMethod.push(0)
          } else {
            state.sanMethod.push(1)
            count = i
          }
        }
      }
    })
    const columns: TableColumnProps<devPlanType>[] = [
      {
        label: '日期',
        prop: 'date',
        minWidth: 100,
        align: 'center',
        unFixed: true,
        showOverflowTooltip: true,
        sortable: true,
        disabled: true
      },
      {
        label: '回路',
        prop: 'num',
        minWidth: 100,
        align: 'center',
        unFixed: true,
        showOverflowTooltip: true,
        sortable: true,
        disabled: true
      },
      {
        label: '时段',
        prop: 'no',
        minWidth: 100,
        align: 'center',
        unFixed: true,
        showOverflowTooltip: true,
        sortable: true,
        disabled: true
      },
      {
        label: '调光%',
        prop: 'dim',
        minWidth: 100,
        align: 'center',
        unFixed: true,
        showOverflowTooltip: true,
        sortable: true,
        disabled: true
      },
      {
        label: '开始时间',
        prop: 'beginTime',
        minWidth: 100,
        align: 'center',
        unFixed: true,
        showOverflowTooltip: true,
        sortable: true,
        disabled: true
      },
      {
        label: '结束时间',
        prop: 'endTime',
        minWidth: 100,
        align: 'center',
        unFixed: true,
        showOverflowTooltip: true,
        sortable: true,
        disabled: true
      }
    ]

    //  合并表格
    const objectSpanMethod = ({ rowIndex, columnIndex }: any) => {
      if (columnIndex === 0 || columnIndex === 1) {
        const rowspan = state.sanMethod[rowIndex]
        const colspan = rowspan > 0 ? 1 : 0
        return {
          rowspan,
          colspan
        }
      }
    }

    return () => (
      <ElDialog
        title="设备计划"
        modelValue={true}
        beforeClose={props.cancel}
        closeOnClickModal={false} // 点遮罩层不关弹窗
        draggable // 可拖拽
        width={800}
      >
        <ProSaasTable<devPlanType>
          columns={columns}
          data={state.data}
          span-method={objectSpanMethod}
          needPagination={false}
        />
      </ElDialog>
    )
  }
})
